<style scoped>
    #chart {
        width: 100%;
        height: 600px;
        margin: 10px auto;
    }
</style>
<template>
    <div>
        <Row>
            <Card>
                <div class="top-tool-bar">
                    <Select v-model="province" style="width:140px" placeholder="请选择省份"  :label-in-value="true" @on-change="selectProvince">
                        <Option v-for="item in provinceList" :value="item.id" :key="item.id" :label="item.name">{{ item.name }}</Option>
                    </Select>

                    <Select v-model="city" style="width:140px" placeholder="请选择城市"  :label-in-value="true" @on-change="selectCity">
                        <Option v-for="item in cityList" :value="item.id" :key="item.id" :label="item.name">{{ item.name }}</Option>
                    </Select>

                    <!--<Select v-model="area" style="width:140px" placeholder="请选择地区"  :label-in-value="true" @on-change="selectArea">
                      <Option v-for="item in areaList" :value="item.id" :key="item.id" :label="item.name">{{ item.name }}</Option>
                    </Select>-->

                    <Select v-model="type" style="width:140px" placeholder="请选择站点类型"  :label-in-value="true" @on-change="selectType">
                        <Option v-for="item in typeList" :value="item.id" :key="item.id" :label="item.name">{{ item.name }}</Option>
                    </Select>

                    <Select v-model="site" style="width:140px" placeholder="请选择站点名"  :label-in-value="true" @on-change="selectSite">
                        <Option v-for="item in siteList" :value="item.id" :key="item.id" :label="item.name">{{item.name }}</Option>
                    </Select>

                    <Select v-model="region" style="width:140px" placeholder="请选择查询区域" :label-in-value="true" @on-change="selectRegion">
                        <Option v-for="item in regionList" :value="item.id" :key="item.id" :label="item.name">{{ item.name }}</Option>
                    </Select>

                    <Select v-model="condition" style="width:140px" placeholder="请选择参数条件"  :label-in-value="true" @on-change="selectCondition">
                        <Option v-for="item in conditionList" :value="item.id" :key="item.id" :label="item.name">{{item.name }}</Option>
                    </Select>

                    <Select v-model="parameter" style="width:140px" placeholder="请选择查询参数"  :label-in-value="true" @on-change="selectParameter">
                        <Option v-for="item in parameterList" :value="item.id" :key="item.id" :label="item.name">{{item.name }}</Option>
                    </Select>

                    <Form :model="list" label-position="right" :label-width="80" inline>
                        <FormItem label="查询条件">
                            <Select v-model="condition1" style="width:150px">
                                <Option  value="月" key="月"></Option>
                                <Option value="日" key="日"></Option>
                                <Option value="小时" key="小时"></Option>
                            </Select>
                        </FormItem>
                        <FormItem label="时间">
                            <DatePicker type="month" placeholder="选择月" style="width: 200px"></DatePicker>
                            <DatePicker type="date" placeholder="选择日期"  style="width: 200px"></DatePicker>
                            <DatePicker type="datetime" format="yyyy-MM-dd HH点" placeholder="选择日期和时间" style="width: 200px"></DatePicker>
                        </FormItem>
                        <Button type="primary" icon="checkmark-circled" @click.prevent.stop="onOk">确定</Button>

                    </Form>
                </div>
                <div>
                    <div id="chart"></div>

                    <Table height="200" border :columns="columns1" :data="data1"></Table>
                </div>
            </Card>
        </Row>
    </div>
</template>
<script type="text/ecmascript-6">
    import api from '@/libs/util';
    import echarts from 'echarts';
    import 'echarts/chart/line';
    import 'echarts/component/title';
    import 'echarts/component/tooltip';
    export default {
        mounted() {
            /*初始化*/
            this.initChart();
            this.getProvince();
        },
        data() {
            return {
                list: {},
                provinceList: [],
                cityList: [],
                areaList: [],
                typeList: [],
                siteList: [],
                regionList: [],
                conditionList: [],
                parameterList: [],
                province:null,
                city:null,
                area:null,
                type:null,
                site:null,
                region:null,
                condition:null,
                parameter:null,
                condition1:'',
                option: {},
                colors: ['#5793f3', '#d14a61', '#BA3FBA'],
                columns1: [
                    {
                        "title": "时间",
                        "key": "time",
                    },
                    {
                        "title": "数据",
                        "key": "show",
                    }
                ],
                data1: [
                    {
                        "time": 3.9,
                        "show": 5.9,
                    }
                ]
            }
        },
        methods: {
            initChart() {
                let $this = this;
                $this.option = {
                    color: $this.colors,
                    title: {
                        text: '1#储罐压力',
                        left: '20px'
                    },
                    tooltip: {
                        trigger: 'none',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    grid: {
                        top: 70,
                        bottom: 50
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLine: {
                                onZero: false,
                                lineStyle: {
                                    color: $this.colors[1]
                                }
                            },
                            axisPointer: {
                                label: {
                                    formatter: function (params) {
                                        return '压力值  ' + params.value
                                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                                    }
                                }
                            },
                            name: '时间',
                            data: ["2016-1", "2016-2", "2016-3", "2016-4", "2016-5", "2016-6", "2016-7", "2016-8", "2016-9", "2016-10", "2016-11", "2016-12"]
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '压力值',
                            axisLine: {
                                onZero: false,
                                lineStyle: {
                                    color: $this.colors[2]
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '压力值',
                            type: 'line',
                            smooth: true,
                            data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
                        }
                    ]
                };
                var echartsOne = document.getElementById('chart');
                var myChart = echarts.init(echartsOne);
                myChart.setOption($this.option);
            },
            getProvince() {
                let params = {
                    id:0
                };
                api.fetchPost(api.path.findStationInfo, params).then((data) => {
                    this.$emit('hideLoading');
                    this.provinceList = data.data;
                }).catch(err => {
                    this.$emit('hideLoading');
                    this.$Message.error(err);
                })
            },
            getCity(id) {
                let params = {
                    id:id
                };
                api.fetchPost(api.path.findStationInfo, params).then((data) => {
                    this.$emit('hideLoading');
                    this.cityList = data.data;
                }).catch(err => {
                    this.$emit('hideLoading');
                    this.$Message.error(err);
                })
            },
            getArea(id) {
                let params = {
                    id:id
                };
                api.fetchPost(api.path.findStationInfo, params).then((data) => {
                    this.$emit('hideLoading');
                    this.areaList = data.data;
                }).catch(err => {
                    this.$emit('hideLoading');
                    this.$Message.error(err);
                })
            },
            getType(id) {
                let params = {
                    id:id
                };
                api.fetchPost(api.path.findStationInfo,params).then((data) => {
                    this.$emit('hideLoading');
                    this.typeList = data.data;
                }).catch(err => {
                    this.$emit('hideLoading');
                    this.$Message.error(err);
                })
            },
            getSize(id) {
                let params = {
                    id:id
                };
                api.fetchPost(api.path.findStationInfo, params).then((data) => {
                    this.$emit('hideLoading');
                    this.siteList = data.data;
                }).catch(err => {
                    this.$emit('hideLoading');
                    this.$Message.error(err);
                })
            },
            getRegion(id) {
                let params = {
                    id:id
                };
                api.fetchPost(api.path.findStationInfo, params).then((data) => {
                    this.$emit('hideLoading');
                    this.regionList = data.data;
                }).catch(err => {
                    this.$emit('hideLoading');
                    this.$Message.error(err);
                })
            },
            getCondition(id) {
                let params = {
                    id:id
                };
                api.fetchPost(api.path.findStationInfo, params).then((data) => {
                    this.$emit('hideLoading');
                    this.conditionList = data.data;
                }).catch(err => {
                    this.$emit('hideLoading');
                    this.$Message.error(err);
                })
            },
            getParameter(id) {
                let params = {
                    id:id
                };
                api.fetchPost(api.path.findStationInfo, params).then((data) => {
                    this.$emit('hideLoading');
                    this.parameterList = data.data;
                }).catch(err => {
                    this.$emit('hideLoading');
                    this.$Message.error(err);
                })
            },
            selectProvince(data) {
                console.log(data);
                this.cityList = [];
                this.areaList = [];
                this.getCity(data.value);
            },
            selectCity(data) {
                console.log(data);
                this.areaList = [];
                this.getArea(data.value);
            },
            selectArea(data) {
                console.log(data);
            },
            selectType(data) {
                console.log(data);
                this.siteList = [];
                this.regionList = [];
                this.parameterList = [];
                this.getSite(data.value);
            },
            selectSite(data) {
                console.log(data);
                this.regionList = [];
                this.parameterList = [];
                this.getRegion(data.value);
            },
            selectRegion(data) {
                console.log(data);
                this.provinceList = [];
                this.getCondition(data.value);
            },
            selectCondition(data) {
                console.log(data);
                this.getParameter(data.value);
            },
            selectParameter(data) {
                console.log(data);
            },
            onOk(){
                let params = {
                    province:this.province,
                    city:this.city,
                    area:this.area,
                    type:this.type,
                    site:this.site,
                    region:this.region,
                    parameter:this.parameter,
                };
                api.fetchPost(api.path.findStationInfo, params).then((data) => {
                    this.$emit('hideLoading');
                    this.data1 = data.data;
                    this.data2 = data.data;
                    this.data3 = data.data;
                    setTimeout(this.onOk,2000);
                }).catch(err => {
                    this.$emit('hideLoading');
                    this.$Message.error(err);
                })
            },
        }
    }
</script>
